<style type="text/css">
	ul.set-con-switch{
		margin-bottom:0;
	}
	span.to{
		font-size:14px;
		color:#4F5356;
		padding-left:2px;
		padding-right:2px;
	}
	div.tab-con{
		font-size:14px;
		color:#4F5356;
		text-align:center;
		margin:40px 120px 10px;
	}
	table.set-con{
		width:100%;
		border-collapse:collapse;
		table-layout:fixed;
	}
	.set-con-long{
		width:19%;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.set-con-middle{
		width:15%;
	}
	.set-con-short{
		width:13%;
	}
	input.text-con{
		color:#4F5356;
		height:34px;
		line-height:34px;
		width:100%;
		padding:0 0.5em;
		font-size:14px;
		border:1px solid #DDD;
		border-radius:4px;
		text-align:center;
	}
	#ParentTable li.text-tip{
		height:34px;
		line-height:34px;
		margin:0 0 4px;
		width:42% !important;
	}
	li.text-width{
		width:136px;
	}
	li.text-con span.select-con{
		width:100%;
		padding:0 0;
		height:34px;
		line-height:31px;
	}
	span.select span.sel-con{
		width:80%;
		line-height:31px;
		height:34px;
		text-align:left;
	}
	li.text-tip ul.sel-opts-ul{
		width:100%;
	}
	li.option span{
		padding:0 5px;
	}
	.boder-tr{
		border-bottom:1px solid #E7E7E7;
		height:40px;
		line-height:40px;
		background-color:#F4F4F4;
	}
	ul.add-btn{
		color:#FF8000;
		margin-top:4px;
		font-size:32px;
		float:right;
		margin-right:30px;
		cursor:pointer;
	}
	ul.add-invalid{
		color:#BFBFBF;
		cursor:default;
	}
	span.btn-color{
		color:#BFBFBF;
	}
	span.handle-tip{
		display:inline-block;
		width:40px;
		height:30px;
		cursor:pointer;
	}
	.table-height{
		height:40px;
		line-height:40px;
		border-bottom:1px solid #E7E7E7;
	}
	ul.set-select-ul{
		position:absolute;
		border:1px solid lightgrey;
		height:139px;
		width:136px;
		top:-1px;
		left:-1px;
		background:#fff;
		display:none;
	}
	p.note-str{
		text-align:left;
	}
	#ParentCtrlTable .list li:hover,.week li:hover{
		background:#F0F0F0;
	}
	div.day{
		width:140px;
		margin:0 auto;
		position:relative;
	}
	span.rule-none{
		height:34px;
		line-height:34px;
		text-align:center;
		width:100%;
		height:34px;
		float:left;
		display:none;
		position:absolute;
	}
	div.daySelect{
		border:1px solid #DDD;
		border-radius:4px;
		height:34px;
		width:136px;
		line-height:34px;
	}
	input.drop_input{
		border:none;
		padding:0;
		height:34px;
		line-height:34px;
		cursor:pointer;
		width:80%;
		color:#4F5356;
		font-size:14px;
		padding-right:12%;
		background:#FFFFFF;
		text-align:center;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	i.drop_icon{
		font-size:28px;
		margin-top:3px;
		left:80%;
		cursor:pointer;
		position:absolute;
	}
	ul.list{
		top:0px;
		overflow-x:hidden;
		border:1px solid #DDD;
		border-top:0px;
		text-align:left;
		position:absolute;
		line-height:31px;
		cursor:pointer;
		max-height:160px;
		display:none;
		margin-left:-1px;
		border-top:0px;
		width:136px;
		background:#FFFFFF;
		z-index:1000;
	}
	li.dayList li, .week li{
		text-align:center;
		padding:0px 10px;
		border-top:1px solid #DDD;
		cursor:pointer;
		height:36px;
		line-height:36px;
	}
	ul.week{
		line-height:31px;
		border:1px solid #DDD;
		border-top:0px;
		width:90px;
		position:absolute;
		margin-left:137px;
		margin-top:75px;
		z-index:1000;
		background:#FFFFFF;
	}
	.dayList li, .week li{
		text-align:center;
		padding:0px 10px;
		border-top:1px solid #DDD;
		cursor:pointer;
		height:36px;
		line-height:36px;
	}
	.week i{
		color:#FE8F19;
		font-size:22px;
		line-height:36px;
		vertical-align:middle;
	}
	div.sel-item{
		position:relative;
		margin:0 5%;
	}
	ul.sel-item{
		position:absolute;
		background:#fff;
		border:1px solid #DDD;
		border-radius:4px;
		width:100%;
		line-height:30px;
		padding:0 0.5em;
		z-index:1000;
		top:39px;
	}
	ul.sel-item:hover{
		background:#eee;
	}
	ul.sel-item > li{
		cursor:pointer;
		width:100%;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		margin:0 auto;
	}
	ul.sel-item > li:hover{
		color:rgb(254, 152, 24);
		background:#eee;
	}
	input[readonly="readonly"]{
		border:0;
		margin:0;
	}
	/*1080p*/
	@media screen and (min-device-width:1920px){
		div.tab-con,
		input.text-con {
			font-size: 18px;
		}
		i.tip {
			line-height: 34px;
		}
	}
</style>
<script type="text/javascript">
(function(){
	<%
		local para = {
			parent_ctrl = {config = {}, parent_list = {}},
			device_manage = {client_list = {}}
		}

		local result = tpl_get_data(para, true)
	-%>

	var parentInfo = <%=result%>;

	function getHour(time){
		var hour = parseInt(time/3600);
		return hour;
	}

	function getMinute(time){
		var minute = parseInt(time%3600);
		minute = parseInt(minute/60);
		return minute;
	}

	function getWeekByDay(day){
		var value="";
		for (var i=0;i<day.length;++i){
			if(day[i]=="1"){
				if (value.length >0){
					value += ",";
				}
				value += week[i];
			}
		}

		if (day == "0000011"){
			value = label.weekend;
		}else if(day == "1111100"){
			value = label.workDay;
		}else if(day == "1111111"){
			value = label.everyDay;
		}
		return value;
	}

	function setTimeList(num){
		if(num < 10){
			num = "0"+num;
		}
		return num;
	}

	function setTimeData(hour, minute){
		var time;
		time = hour * 3600;
		time += minute * 60;
		return time;
	}

	init(parentInfo);

	function init(result){
		var errNo = result[ERR_CODE];
		var ret;
		if (E_NONE == errNo){
			ret = result[K_MODULE];
		}else{
			console.log(result);
			return;
		}

		var switchParent = ret.parent_ctrl.config;

		initSwitch("SwitchParent", switchParent.enable, function(state,init){
			if (1 == state){
				$("#ParentCtrlTable").show();
			}else{
				$("#ParentCtrlTable").hide();
			}

			if (!init){
				var data = {};
				var para = {};
				para.parent_ctrl = {};
				para.parent_ctrl.config = data;

				data.enable = $("#SwitchParent").attr("data-value");
				showLoading(label.saving);
				apiSet(para, function(){
					$.setTimeout(function(){
						closeLoading();
					}, 2000);
				});
			}
		});
	}

	var parentRuleLen;
	var hashList = [];
	var addFlag = "1";
	var hourList = [];
	var minuteList = [];
	var devList = [];
	var devDay = "1111111";
	var week = [label.Monday, label.Tuesday, label.Wednesday, label.Thursday, label.Friday, label.Saturday, label.Sunday];
	var day = [label.everyDay, label.workDay, label.weekend, label.custom];
	var dayData = ["1111111", "1111100", "0000011", "1000000"];

	var parentList = parentInfo[K_MODULE].parent_ctrl.parent_list;
	var deviceLists = parentInfo[K_MODULE].device_manage.client_list;

	for (var i = 0; i < 24; i++){
		hourList[i] = {name:setTimeList(i), value:i};
	}

	for (var i = 0; i < 60; i++){
		minuteList[i] = {name:setTimeList(i), value:i};
	}

	function parentRule(ret){
		parentRuleLen = ret.length;
		if (10 == parentRuleLen){
			$("ul.add-btn").addClass("add-invalid");
		}

		if (0 == parentRuleLen){
			$("ul.add-btn").click();
		}else{
			for (var i = 0; i < parentRuleLen; i++){
				hashList[ret[i].id] = i;
				$("#ParentTable").append(initParentEntry(ret[i]));
			}

			$("span.del-item").click(function(){
				if (addFlag == "1"){
					var data = {};
					var para = {};
					para.parent_ctrl = {};
					para.parent_ctrl.parent_list = data;

					data.id = $(this).attr("data-value");
					showLoading(label.saving);
					apiDel(para, function(){
						$.setTimeout(function(){
						closeLoading();
							stateman.go("pc.parentCtrlApp");
						}, 2000);
					});
				}
			});

			$("span.edit-item").click(function(){
				if (addFlag == "1"){
					addFlag = "0";
					$("ul.add-btn").addClass("add-invalid");
					$("td.status-handle span.color-orange").addClass("btn-color").removeClass("color-orange");
					var clientId = $(this).attr("data-value");
					var clientsIndex = hashList[clientId];
					devDay = ret[clientsIndex].cycle;
					var setCycle = '<td><div class="day">'+
										'<span class="rule-none" title="'+getWeekByDay(devDay)+'">'+getWeekByDay(devDay)+'</span>'+
										'<div class="select daySelect" value="0">'+
											'<input id="RuleCycle" unselectable="on" class="drop_input"  readonly="readonly" type="text" value="'+getWeekByDay(devDay)+'" data="'+devDay+'" title="'+getWeekByDay(devDay)+'" />'+
											'<i class="drop_icon icon_list-expansion"></i>'+
											'<ul class="list dayList"></ul>'+
										'</div>'+
										'<div class="selfDay">'+
											'<ul class="week"></ul>'+
										'</div>'+
									'</div></td>';

					$(this).parents("tr").html(newRow + setCycle + setTime + editButton);
					$("#RuleName").val(ret[clientsIndex].name);
					$("#RuleMac").text(ret[clientsIndex].mac);
					initSelect("StartHour", hourList, getHour(ret[clientsIndex].start_time));
					initSelect("StartMinute", minuteList, getMinute(ret[clientsIndex].start_time));
					initSelect("EndHour", hourList, getHour(ret[clientsIndex].end_time));
					initSelect("EndMinute", minuteList, getMinute(ret[clientsIndex].end_time));
					initListData("dayList",day,dayData);
					initListData("week",week,null);
					initClassFun();
					selItems();

					$("#SaveEdit").click(function(){
						saveParentCtrl("set", clientId);
					});

					$("#SaveCancel").click(function(){
						stateman.go("pc.parentCtrlApp");
					});
				}
			});
		}
	}

	function initParentEntry(client){
		return  '<tr class="table-height" data-value="' + client.id +'">' +
					'<td class="set-con-long" title="' + client.name + '">' + client.name + '</td>' +
					'<td>' + client.mac + '</td>' +
					'<td class="set-con-long" title="' + getWeekByDay(client.cycle) + '">' + getWeekByDay(client.cycle) + '</td>' +
					'<td>' + setTimeList(getHour(client.start_time)) + '<span class="to">' + ':' +'</span>' + setTimeList(getMinute(client.start_time)) + '</td>' +
					'<td>' + setTimeList(getHour(client.end_time)) + '<span class="to">' + ':' +'</span>' + setTimeList(getMinute(client.end_time)) + '</td>' +
					'<td class="status-handle">' +
						'<span class="handle-tip color-orange edit-item" data-value="' + client.id +'">' + btn.edit +  '</span>' +
						'<span class="handle-tip color-orange del-item" data-value="' + client.id +'">' + btn.del +  '</span>' +
					'</td>' +
				'</tr>';
	}

	var newRow =  '<td>' +
						'<div class="sel-item">' +
							'<input id="RuleName" class="text-con dev-name hover" maxlength="32" value="">' +
							'<ul class="sel-item hidden"></ul>' +
						'</div>' +
					'</td>' +
					'<td id="RuleMac"></td>';

	var setCycle = '<td><div class="day">'+
						'<span class="rule-none" title="'+getWeekByDay(devDay)+'">'+getWeekByDay(devDay)+'</span>'+
						'<div class="select daySelect" value="0">'+
							'<input id="RuleCycle" unselectable="on" class="drop_input"  readonly="readonly" type="text" value="'+getWeekByDay(devDay)+'" data="'+devDay+'" title="'+getWeekByDay(devDay)+'" />'+
							'<i class="drop_icon icon_list-expansion"></i>'+
							'<ul class="list dayList"></ul>'+
						'</div>'+
						'<div class="selfDay">'+
							'<ul class="week"></ul>'+
						'</div>'+
					'</div></td>';

	var setTime = '<td>' +
						'<li class="text-con text-tip">' +
							'<span id="StartHour" class="select select-con">' +
								'<span class="value sel-value sel-con">' + '</span>' +
								'<i class="tip icon_list-expansion">' + '</i>' +
							'</span>' +
						'</li>' +
						'<span class="to">' + ':' +'</span>' +
						'<li class="text-con text-tip">' +
							'<span id="StartMinute" class="select select-con">' +
								'<span class="value sel-value sel-con">' + '</span>' +
								'<i class="tip icon_list-expansion">' + '</i>' +
							'</span>' +
						'</li>' +
					'</td>' +
					'<td>' +
						'<li class="text-con text-tip">' +
							'<span id="EndHour" class="select select-con">' +
								'<span class="value sel-value sel-con">' + '</span>' +
								'<i class="tip icon_list-expansion">' + '</i>' +
							'</span>' +
						'</li>' +
						'<span class="to">' + ':' +'</span>' +
						'<li class="text-con text-tip">' +
							'<span id="EndMinute" class="select select-con">' +
								'<span class="value sel-value sel-con">' + '</span>' +
								'<i class="tip icon_list-expansion">' + '</i>' +
							'</span>' +
						'</li>' +
					'</td>' +
					'<td>';

	var saveButton = '<span class="handle-tip color-orange" id="SaveAdd">' + btn.save +  '</span>' +
					 '<span class="handle-tip color-orange" id="Cancel">' + btn.cancel +  '</span></td>';

	var editButton = '<span class="handle-tip color-orange" id="SaveEdit">' + btn.save +  '</span>' +
					 '<span class="handle-tip color-orange" id="SaveCancel">' + btn.cancel +  '</span></td>';

	$("ul.add-btn").click(function(){
		if ("1" == addFlag){
			if (document.getElementById("ParentTable").rows.length < 11
				&& document.getElementById("ParentTable").rows.length == (parentRuleLen + 1)){
				addFlag = "0";
				$("td.status-handle span.color-orange").addClass("btn-color").removeClass("color-orange");
				var emptyRow =  '<tr class="table-height">' + newRow + setCycle + setTime + saveButton + '</tr>';
				$("#ParentTable").append(emptyRow);
				initSelect("StartHour", hourList, 00);
				initSelect("StartMinute", minuteList, 00);
				initSelect("EndHour", hourList, 00);
				initSelect("EndMinute", minuteList, 00);
				initListData("dayList",day,dayData);
				initListData("week",week,null);
				initClassFun();
				selItems();
				$("ul.add-btn").addClass("add-invalid");
			}else{
				$("ul.add-btn").addClass("add-invalid");
			}

			$("#SaveAdd").click(function(){
				saveParentCtrl("add","");
			});

			$("#Cancel").click(function(){
				stateman.go("pc.parentCtrlApp");
			});
		}
	});

	function initListData(cla,val,data){
		$("#ParentCtrlTable").find("."+cla).empty();
		for(var i=0;i<val.length;i++){
			var liHtml = "";
			if(data!=null){
				liHtml = '<li data='+data[i]+' value="'+val[i]+'">'+val[i]+'</li>'
			}else{
				liHtml = '<li value="'+val[i]+'">'+val[i]+'</li>'
			}
			if(cla=="week"){
				if(i==0){
					liHtml = '<li value="1">'+val[i]+'<i class="icon_select_on"></i></li>'
				}else{
					liHtml = '<li value="0">'+val[i]+'<i></i></li>'

				}
			}
			$("#ParentCtrlTable").find("."+cla).append(liHtml);
		}
	}

	function initClassFun(){
		$("#ParentCtrlTable").find(".dayList").children("li").unbind();
		$("#ParentCtrlTable").find(".week").children("li").unbind("click");
		$("#ParentCtrlTable").find(".select").unbind("click");
		$("#ParentCtrlTable").find("input").unbind();

		$("#ParentCtrlTable").find(".dayList").children("li").hover(function(){
			var value = $(this).html();
			if(value == label.custom){
				$(this).parents(".day").find(".selfDay").show();
			}
		},function(){
			var value = $(this).html();
			if(value != label.custom){
				$(this).parents(".day").find(".selfDay").hide();
			}
		});

		$("#ParentCtrlTable").find(".week").children("li").click(function(){
			var value = $(this).attr("value");
			if(value =="0"){
				$(this).find("i").addClass("icon_select_on");
				$(this).find("span").show();
				$(this).attr("value","1");
			}else{
				$(this).find("i").removeClass("icon_select_on");
				$(this).attr("value","0");
			}
			var dayLi=$(this).parents(".week").find("li");
			var data = "";
			var val = "";
			for(var i=0 ;i<dayLi.length;i++){
				data += $(dayLi[i]).attr("value");
				if($(dayLi[i]).attr("value")=="1"){
					if(val.length>0){
						val +=",";
					}
					val += week[i];
				}
			}
			if(data=="0000000"){
				data="1000000";
				val=label.Monday;
				return 0;
			}else if(data == "1111100"){
				val = label.workDay;
			}else if(data == "0000011"){
				val = label.weekend;
			}else if(data == "1111111"){
				val = label.everyDay;
			}
			$(this).parents(".day").find(".dayList").children("li:last").attr("value",val);
			$(this).parents(".day").find(".dayList").children("li:last").attr("data",data);
			$(this).parents(".day").find(".daySelect").find("input").attr("title",val);
			$(this).parents(".day").find(".daySelect").find("input").attr("data",data);
			$(this).parents(".day").find(".daySelect").find("input").val(val);
			$(this).parents(".day").find(".dayList").show();
		});

		$("#ParentCtrlTable").find(".select").click(function(e){
			e = e || window.event;
			if($(e.target).hasClass("drop_input") || $(e.target).hasClass("drop_icon")){
				closeNote();
				$("#ParentCtrlTable").find(".list").hide();

				var value = $(this).attr("value");
				$(this).find(".list").children("li").css({color:"#4F5356"})

				$("#ParentCtrlTable").find(".select").attr("value","0");
				$("#ParentCtrlTable").find(".select").find("i").css({transform:"rotate(0deg)"});
				$("#ParentCtrlTable").find(".selfDay").hide();
				if(value == "0"){
					$(this).find("i").css({transform:"rotate(180deg)"});
					$(this).attr("value","1");
					$(this).find(".list").show();
				}else{
					$(this).attr("value","0");
					$(this).find("i").css({transform:"rotate(0deg)"});
					$(this).find(".list").hide();
				}
				if($(this).hasClass("daySelect")){
					var data = $(this).find("input").attr("data");
					if(data!="1111111" &&data!="1111100" && data!="0000011" && data.length>0){
						initWeek($(this).next(".selfDay").find(".week"),data);
						$(this).find(".list").children("li:last").css({color:"#FE8F19"});
					}else{
						initWeek($(this).next(".selfDay").find(".week"),"1000000");
						$(this).find(".list").children("li:last").css({color:"#4F5356"});
					}
				}
			}
		});

		$("#ParentCtrlTable").find(".list").children("li").click(function(){
			var value = $(this).attr("value");
			$(this).parents(".select").find("input").attr("title",value);

			if($(this).html()== label.custom){
				$(this).parents(".day").find(".selfDay").hide();
				if(value==label.custom)
					value=label.Monday;
			}

			$(this).parents(".select").find("input").val(value);
			if($(this).parents(".dayList")){
				$(this).parents(".select").find("input").attr("data",$(this).attr("data"));
			}
			$(this).parents(".list").hide();
			$(this).parents(".select").attr("value","0");
			$("#ParentCtrlTable").find(".select").find("i").css({transform:"rotate(0deg)"});
		});

		$("body").click(function(e){
			e = e || window.event;
			if (!$(e.target).hasClass("drop_input")&& !$(e.target).hasClass("drop_icon")&& !$(e.target).parents("ul").hasClass("week") && !$(e.target).parents("ul").hasClass("list") && !$(e.target).hasClass("alert-btn") && !$(e.target).hasClass("btn") && !$(e.target).hasClass("add_edit")){
				$("#ParentCtrlTable").find(".list").hide();
				$("#ParentCtrlTable").find(".select").attr("value","0");
				$("#ParentCtrlTable").find(".select").find("i").css({transform:"rotate(0deg)"});
				$("#ParentCtrlTable").find(".selfDay").hide();
			}
		});

		$("#ParentCtrlTable").find("input").focus(function(){
			this.blur();
		});
	}

	function initWeek(curThis,data){
		var liArray = $(curThis).children("li");
		for(var i=0;i<liArray.length;i++){
			if(data[i]=="1"){
				$(liArray[i]).attr("value","1");
				$(liArray[i]).find("i").addClass("icon_select_on");
			}else{
				$(liArray[i]).attr("value","0");
				$(liArray[i]).find("i").removeClass("icon_select_on");
			}
		}
		$(curThis).parents(".day").find(".dayList").children("li:last").attr("data",data);
		$(curThis).parents(".day").find(".dayList").children("li:last").attr("value",getWeekByDay(data));
	}

	function selItems(){
		var selItems = "";

		if (deviceLists.length <= 0){
			return;
		}
		$("ul.sel-item").empty();
		for (var i = 0; i < deviceLists.length; i++){
			selItems = selItems +
					   '<li class="item" data-value="'+ i +'" title="'+ deviceLists[i].name +'">' +deviceLists[i].name +
					   '</li>';
		}

		$("ul.sel-item").append(selItems);

		$("#RuleName").click(function(){
			if (deviceLists.length > 0){
				$("ul.sel-item").show();
			}
		});

		$("li.item").click(function(){
			var index = $(this).attr("data-value");
			$("#RuleName").val(deviceLists[index].name);
			$("#RuleMac").text(deviceLists[index].mac);
			$("ul.sel-item").hide();
		});
	}

	$("body").click(function(event){
		var eObj = $(event.target);

		if (!eObj.hasClass("dev-name")){
			$("ul.sel-item").hide();
		}
	});

	function saveParentCtrl(action, index){
		var data = {};
		var para = {};
		var start_hour = $("#StartHour").attr("data-value");
		var start_minute = $("#StartMinute").attr("data-value");
		var end_hour = $("#EndHour").attr("data-value");
		var end_minute = $("#EndMinute").attr("data-value");

		para.parent_ctrl = {};
		para.parent_ctrl.parent_list = data;
		data.id = index;
		data.name = $("#RuleName").val();
		data.mac = $("#RuleMac").text();
		data.cycle = $("#RuleCycle").attr("data");
		data.start_time = setTimeData(start_hour, start_minute);
		data.end_time = setTimeData(end_hour, end_minute);

		if (errHandle(checkName(data.name))){
			return;
		}

		if (errHandle(checkTime(data.start_time, data.end_time))){
			return;
		}

		showLoading(label.saving);
		if(action == 'set'){
			apiSet(para, function(ret){
				var code = ret[ERR_CODE];
				if (E_NONE == code){
					$.setTimeout(function(){
						closeLoading();
						stateman.go("pc.parentCtrlApp");
					}, 2000);
				}else{
					errHandle(code);
					closeLoading();
				}
			});
		}else if(action == 'add'){
			apiAdd(para, function(ret){
				var code = ret[ERR_CODE];
				if (E_NONE == code){
					$.setTimeout(function(){
						closeLoading();
						stateman.go("pc.parentCtrlApp");
					}, 2000);
				}else{
					errHandle(code);
					closeLoading();
				}
			});
		}
	}

	parentRule(parentList);

	function errHandle(code)
	{
		switch(code){
		case E_NONE:
			return false;
		case E_CLIENT_RULENAME_LEN:
			showNote(errStr.devNameErr);
			break;
		case E_END_LESS_START:
			showNote(errStr.startLessEndTime);
			break;
		default:
			showNote(errStr.unknownErr + code);
			break;
		}
		return true;
	}

	function checkTime(start, end) {
		if(start >= end){
			return E_END_LESS_START;
		}

		return E_NONE;
	}

	function checkName(name){
		if (checkStrLen(name, 32, 1) != E_NONE){
			return E_CLIENT_RULENAME_LEN;
		}

		return E_NONE;
	}
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/parent_ctrl.png?_=20170809165512" />
			<span class="help-title">{%label.parentCtrl%}</span>
		</li>
		<li class="summary">{%helpStr.parentCtrl%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/parent_ctrl.png?_=20170809165512" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.parentCtrl%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul class="set-con set-con-switch">
		<p class="set-con-desc">
			<label class="tip-lbl">{%label.parentCtrl%}</label>
			<span id="SwitchParent" class="switch">
				<i class="switch-circle icon_select_off"></i>
			</span>
		</p>
	</ul>
	<div id="ParentCtrlTable" class="tab-con hidden">
		<table  id="ParentTable" class="set-con">
			<tr class="boder-tr">
				<th class="set-con-long">{%label.deviceName%}</th>
				<th class="set-con-long">{%label.macAddr%}</th>
				<th class="set-con-long">{%label.cycle%}</th>
				<th class="set-con-middle">{%label.startTime%}</th>
				<th class="set-con-middle">{%label.endTime%}</th>
				<th class="set-con-short">{%label.handle%}</th>
			</tr>
		</table>
		<ul class="add-btn"><i class="icon_add"></i></ul>
		<div class="err-note hidden">
			<i class="err-icon icon_remind_line"></i>
			<p class="note-str"></p>
		</div>
	</div>
</div>